<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            margin: 100px auto;
            width: 400px;
            height: 230px;
            overflow: hidden;
        }
        .inner {
            width: 2000px;
            height: 230px;
        }
        img {
            float: left;
            width: 400px;
            height: 230px;
        }
        button {
            font-size: 30px;
            font-weight: 900;
            width:100px;
            height: 400px;
            outline: none;
            border: none;
            background: none;
        }
        button:hover {
            background: rgba(255,255,255,0.3);
        }
        #left {
            position: absolute;
            top: 30px;
            left: 460px;
        }
        #right {
            position: absolute;
            top: 30px;
            left: 810px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="outer">
    <div class="inner" id="inner">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
        <img src="4.jpg">
        <img src="1.jpg">
    </div>
</div>
<button  id="left"><</button>
<button  id="right">></button>
<script>
    var inner = document.getElementById('inner');
    var b_left = document.getElementById('left');
    var b_right = document.getElementById('right');
    var number=0;
    b_left.onclick= function () {
        var interval = setInterval(
            function(){
                if(number===-1600){
                    number = 0
                }else{
                    number -= 40;
                    if(number%400===0){
                        clearInterval(interval)
                    }
                }
                console.log(number);
                num = number + 'px';
                inner.style.marginLeft = num
            },50
        )
    };
    b_right.onclick= function () {
        var interval = setInterval(
            function(){
                if(number>0){
                number = -1200
            }else{
                number += 40;
                if(number%400===0){
                    clearInterval(interval)
                }
            }
            console.log(number);
            num = number + 'px';
            inner.style.marginLeft = num
            },50
        )
    }
</script>
</body>
</html>